<template>
    <el-card class="box-card" width="100%">
  <div slot="header" class="clearfix">
    <span>模型详情</span>
    <el-button style="float: right; padding: 1px 0; height: 35px; width: 55px" type="primary" @click="goBack()">返回</el-button>
  </div>
  <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="基本信息" name="first">
  <div class="forms">
    <el-form ref="detailData" :rules="rules" :model="detailData" label-width="100px" class="model-form">
      <el-form-item label="模型id:" prop="id">
        <el-input v-model="detailData.id" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="模型名称：" prop="name">
        <el-input v-model="detailData.name" :disabled="role>=3||role===null"></el-input>
      </el-form-item>
      <el-form-item label="模型类型：" prop="model_type">
        <el-input v-model="detailData.model_type" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="模型文件名：" prop="model_file_name" v-show="detailData.model_type!=='py'">
        <el-input v-model="detailData.model_file_name" :disabled="role>=3||role===null" ></el-input>
      </el-form-item>
      <el-form-item label="模型类名：" prop="model_class">
        <el-input v-model="detailData.model_class" :disabled="role>=3||role===null"></el-input>
      </el-form-item>
      <el-form-item label="模型依赖：" prop="dependencies">
        <el-input v-model="detailData.dependencies" :disabled="role>=3||role===null"></el-input>
      </el-form-item>
      <el-form-item label="当前版本：" prop="commit_id">
        <el-input v-model="detailData.commit_id" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="创建者：" prop="user_id">
        <el-input v-model="detailData.user_id" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="创建时间：" prop="create_date">
        <el-input v-model="detailData.create_date" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="是否公有：" prop="public">
        <el-input v-model="detailData.public" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="模型内容：" prop="model_file_bytes" v-show="detailData.model_type==='py'">
        <el-input v-model="detailData.model_file_bytes" type="textarea" :rows="8" :disabled="role>=3||role===null"></el-input>
      </el-form-item>
      <el-form-item label="描述：" prop="description">
        <el-input v-model="detailData.description" type="textarea" :rows="5" maxlength=500 :disabled="role>=3||role===null"></el-input>
      </el-form-item>
      <el-form-item label="签入信息：" prop="commit_message">
        <el-input v-model="detailData.commit_message"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editModelProcess()" :disabled="role>=3">保存编辑</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据集id: {{detailData.id}} -->
  </div>
  </el-tab-pane>
  <el-tab-pane label="模型历史" name="second">
<div class="git-graph">
    <div v-if="loading" class="loading">历史读取中</div>
    <div id="graph-container" ref="rgit-graph" />
  </div>
  </el-tab-pane>
  </el-tabs>
  <!-- <div class="text item">
    数据集名称： {{detailData.name}}
  </div>
  <div class="text item">
    创建者： {{detailData.user_id}}
  </div>
  <div class="text item">
    创建时间： {{detailData.create_date}}
  </div>
  <div class="text item">
    是否公有： {{detailData.public}}
  </div>
  <div class="text item">
    描述： {{detailData.description}}
  </div> -->
</el-card>
</template>
<style scoped>
  .forms {
    font-size: 16px;
    text-align: left;
    margin-left: 1px;
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }

  .el-card__header {
    padding: 18px 20px;
    background-color: rgb(238, 241, 246);
  }

  .model-form {
    width: 90%;
    margin: 10px; /* 上下间距160px，左右自动居中*/
    background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
    padding: 10px;
    border-radius: 20px; /* 圆角 */
  }

  .git-graph {
    padding: 30px;
  }
  /* text:hover{
    cursor: pointer !important
  } */
</style>
<script>
import { getModel, editModel, getModelHistory } from '@/api/request/model'
import { getUserEmail } from '@/api/request/user'
import { Base64 } from 'js-base64'

import { createGitgraph, templateExtend } from '@gitgraph/js'
import { Message } from 'element-ui'
// import store from '@/store/store'
export default {
//   props: ['title'],
  data () {
    return {
      detailData: null,
      role: 3,
      activeName: 'first',
      loading: true,
      history: null,
      gitgraph: null,
      rules: {
        name: [
          {required: true, message: '模型名称不能为空', trigger: 'blur'},
          {min: 3, max: 50, message: '模型名称3-50字节', trigger: 'blur'}
        ],
        model_class: [
          {required: true, message: '模型类名不能为空', trigger: 'blur'},
          {min: 3, max: 50, message: '模型类名3-50字节', trigger: 'blur'}
        ],
        commit_message: [
          {required: true, message: '签入信息不能为空', trigger: 'blur'},
          {min: 3, max: 200, message: '签入信息3-200字节', trigger: 'blur'}
        ],
        description: [
          {required: true, message: '描述不能为空', trigger: 'blur'},
          {min: 3, max: 500, message: '描述3-500字节', trigger: 'blur'}
        ],
        model_file_bytes: [
          {required: true, message: '模型内容不能为空', trigger: 'blur'}
        ]
      }
    //   title: '我创建的数据集'
    }
  },
  methods: {
    update () {
      this.detailData = null
      this.role = this.$route.query.role
      getModel(this.$route.query.model_id).then(response => {
        this.detailData = response
        this.detailData.model_file_bytes = Base64.decode(this.detailData.model_file_bytes)
        getUserEmail({user_id: this.detailData.user_id}).then(response => {
          this.detailData.user_id = response.email
        })
      })
      this.getVersionHistory()
    },
    goBack () {
      this.$router.go(-1)
    },
    editModelProcess () {
      this.$refs['detailData'].validate(valid => {
        if (valid) {
          let formData = new FormData()
          formData.append('model_id', this.detailData.id)
          formData.append('model_name', this.detailData.name)
          formData.append('model_class', this.detailData.model_class)
          formData.append('model_type', this.detailData.model_type)
          formData.append('model_file_name', this.detailData.model_file_name)
          formData.append('dependencies', this.detailData.dependencies)
          formData.append('description', this.detailData.description)
          formData.append('filebytes', new Blob([this.detailData.model_file_bytes], {type: 'text/plain;charset=utf-8'}), 'filebytes')
          formData.append('commit_message', this.detailData.commit_message)
          editModel(formData).then(response => {
            this.update()
          })
        } else {
          Message({
            message: '参数错误，请校验参数',
            type: 'error',
            duration: 3 * 1000
          })
        }
      })
    },
    getVersionHistory () {
      this.history = null
      this.loading = true
      getModelHistory({ model_id: this.$route.query.model_id }).then(data => {
        this.loading = false
        this.history = data
        this.render()
        // this.$nextTick(this.render)
      })
    },
    render () {
      document.getElementById('graph-container').innerHTML = ''
      if (!this.history) return false

      // const history = JSON.parse(JSON.stringify(this.history))

      const graphContainer = document.getElementById('graph-container')
      const gitgraph = createGitgraph(graphContainer, {
      // orientation: 'vertical-reverse',
      // author: `${this.email.replace(/@.*/, '')} <${this.email}>`,
      // author: '',
      // mode:'compact',
        template: templateExtend('metro', {
          branch: {
            lineWidth: 6,
            label: {
              font: 'normal 12pt Arial'
            }
          },
          commit: {
            dot: {
              size: 15
            },
            message: {
              font: 'normal 12pt Arial',
              displayAuthor: false,
              displayHash: false
            }
          },
          mode: 'compact'
        })
      })
      let obj = this
      var branchTree = gitgraph.branch('master')
      for (const idx in this.history) {
        var commitDetail = this.history[this.history.length - idx - 1]
        //   var branch_tree = gitgraph.branch(branch_detail.branch)
        branchTree.commit({
          subject: commitDetail.short_id + ' - ' + commitDetail.title + ' - ' + commitDetail.author_email,
          hash: commitDetail.id,
          author: commitDetail.author_name,
          //   author_email: commitDetail.author_email,
          onClick (commit) {
            obj.$router.push({path: '/model/version/detail', query: {model_id: obj.detailData.id, commit_id: commit.hash}})
          },
          onMouseOver (commit) {
            console.log('in')
            obj.$refs['rgit-graph'].style.cursor = 'pointer'
          },
          onMouseOut (commit) {
            console.log('out')
            obj.$refs['rgit-graph'].style.cursor = 'default'
          }
        })
      }
      return true
    },
    handleClick (tab, event) {
      console.log(tab, event)
      if (tab.name === 'second') {
        this.update()
      } else {
        // this.update()
      }
    }
  },
  activated () {
    this.update()
  },
  mounted () {
    // this.update()
    // this.loading = true
    // this.getVersionHistory()
  }
}
</script>
